<template>
	<div>
		    <h2 class="">Agora Video Web SDK Quickstart</h2>
		     <div >
		                <button type="button" id="join" @click="createHostLive('s')">屏幕分享直播</button>
						<button type="button" id="join" @click="createHostLive('v')">摄像头直播</button>
						
						<button type="button" id="join" @click="createAudLive()">游客</button>
		                <button type="button" id="leave" @click="leaveLive()">Leave</button>
		     </div>
			 <!-- <el-row>
				 <el-col lg=""></el-col>
				 
			 </el-row> -->
			 <div class="screenContent" >
			     <div class="liveScreen" id="localStream"
>
			     </div>
			 </div>
			 <div class="screenContent" >
			 	<div class="liveScreen" id="localStream2"
				v-loading="screenLoading"
				element-loading-text="直播间创建中..."
				></div>
			 </div>
			 
			 <div class="player-container">
			 
			 </div>
			 <div>
				 <el-button v-if="isme" @click="openms()" type="success" size="small" style="height: 35px">发起秒杀</el-button>
				 <el-button v-if="!isme" @click="opengetms()" type="success" size="small" style="height: 35px">参与秒杀</el-button>
			 </div>
			 <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			   <el-form ref="form" :model="form" label-width="80px">
			     <!-- <el-form-item label="主播id" prop="userId">
			       <el-input v-model="form.userId" placeholder="请输入主播id" />
			     </el-form-item> -->
			     <el-form-item label="商品名称" prop="seckillName">
			       <el-input v-model="form.seckillName" placeholder="请输入商品名称" :disabled="!isme" />
			     </el-form-item>
				 <el-form-item label="数量" prop="seckillNum">
				   <el-input v-model="form.seckillNum" placeholder="请输入数量" :disabled="!isme" />
				 </el-form-item>
			     <el-form-item label="开始时间" prop="startTime">
			       <el-date-picker clearable size="small"
			         v-model="form.startTime"
			         type="date"
			         value-format="yyyy-MM-dd"
			         placeholder="选择开始时间"
					 :disabled="!isme">
			       </el-date-picker>
			     </el-form-item>
			     <el-form-item label="截至时间" prop="endTime">
			       <el-date-picker clearable size="small"
			         v-model="form.endTime"
			         type="date"
			         value-format="yyyy-MM-dd"
			         placeholder="选择截至时间"
					 :disabled="!isme">
			       </el-date-picker>
			     </el-form-item>
			     <!-- <el-form-item label="备注" prop="memo">
			       <el-input v-model="form.memo" placeholder="请输入备注" />
			     </el-form-item> -->
			   </el-form>
			   <div slot="footer" class="dialog-footer">
			     <el-button type="primary" @click="fqms()" v-show="!mson&&isme">确 定</el-button>
				 <el-button type="primary" @click="qg()" v-show="!qson&&!isme">立即抢购</el-button>
				 <el-button type="primary" v-show="qson&&!isme">已参与</el-button>
			     <el-button @click="cancel">关 闭</el-button>
			   </div>
			 </el-dialog>
	</div>
	

	
	
	
</template>

<script src="./demo.js"> </script>

<style>
	.player-container{
		width: 80%;
		min-height: 6.25rem;
	}
	.liveScreen {
		width: -webkit-fill-available;
		height: -webkit-fill-available;
		background-color: #2c2c2c;
		
/* 	  float: left;
	  width: 100vw;
	  height: 80vh;
	  
	  overflow: hidden; */
	}
	.screenContent {
		/* width: 100%; */
		height: 56vw;
		
/* 	  overflow: hidden;
	  width: 100vw;
	  height: 80vh;
	  float: left; */
	  }
</style>
